<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css"/>
		<script src="js/lib/jquery-1.11.0.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/vue.min.js"></script>
		<script src="js/lib/vue-resource.js"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		body{
	 		font-size:12px;
	 	}
		table td:nth-child(even) {
			
		}
		table tr:nth-child(1) {
			background-color:#f1f1f1;
		}
		input{
			width:280px;
		}
		span{
			width:20px;color:red;display:inline-block;text-align:center;
		}
		#sho{
			width:300px;
			height:50px;
			background:#d9534f;
			opacity:0.8;
			border-radius:8px;
			color:#fff;
			text-align: center;
			font-size:30px;
			position: absolute;
			top:0px;
			left:550px;
			display:none;
		}
	</style>
	<body>
		<div class="" id="box">
				<div class="">
		<!--加载动画-->
		<div class="wrapper">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
        </div>
			<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="12" style="font-size:26px;color:#337ab7">新增加一个三级分销产品:&nbsp;&nbsp;&nbsp;&nbsp;<a href="04.html">【查询修改】</a></th>
					</tr>
					<tr>
						<td>品牌编号：</td>
						<td colspan="12">
						<select name="" id="brand_id" v-model="brand_id" type="text" class="form-control" style="width:280px;">
							<option value="">请选择</option>
							<option id="op"></option>
						</select>
						</td>											
					</tr>
					<tr>
						<td>产品名称：</td>
						<td colspan="12">
							<input id="name" v-model="name" placeholder="请输入产品名称" class="form-control" type="text" style="width:280px;" />							
						</td>	
					</tr>
					<tr>
						<td>金额：</td>
						<td colspan="12">
							<input id="money" v-model="money" placeholder="请输入金额" class="form-control" type="text" style="width:280px;" />			
						</td>	
					</tr>
					<tr>
						<td>折扣：</td>
						<td colspan="12">
							<input id="discount" v-model="discount" readOnly="true" placeholder="折扣默认为1" class="form-control" type="text" style="width:280px;" />			
						</td>	
					</tr>
					<tr>
						<td>购买方式：</td>
						<td colspan="12">
							<select name="" id="st" class="form-control" type="text" style="width:280px;">
							<option value="0">【线上购买】显示价格</option>
							<option value="1">【联系客服】显示价格</option>
							<option value="2">【线上购买】隐藏价格</option>
							<option value="3">【联系客服】隐藏价格</option>
							</select>	
						</td>	
					</tr>					
					<tr>
						<td>是否启用：</td>
						<td colspan="12">
							<select name="" id="sta" class="form-control" type="text" style="width:280px;">
								<option value="0">启用</option>
								<option value="1">不启用</option>
							</select>	
						</td>	
					</tr>
					<tr>
						<td colspan="12">
							<input id="btn" type="btn" v-on:click="add()" value="新增" class="btn btn-danger" style="display:block;margin:0 210px;"/>
						</td>
					</tr>					
				</tbody>
			</table>					
			</div>
			</div>									
			<div class="bor">
				<table class="table table-hover">
					<caption class="h4 text-info">新增产品</caption>
					<tr>
						<th class="text-center">序号</th>
						<th class="text-center">品牌编号</th>
						<th class="text-center">级别</th>
						<th class="text-center">产品名称</th>
						<th class="text-center">金额</th>
						<th class="text-center">折扣</th>
					<!--	<th class="text-center">结算费率</th>-->
						<th class="text-center">操作</th>
					</tr>
					<tr v-for="(item,index) in mydata">
						<td class="text-center">{{index+1}}</td>
						<td class="text-center">{{item.brand_id}}</td>
						<td class="text-center">{{item.grade}}</td>
						<td class="text-center">{{item.name}}</td>
						<td class="text-center">￥{{item.money}}</td>
						<td class="text-center">{{item.discount}}</td>
						<!--<td class="text-center">{{item.rate}}%</td>-->
						<td class="text-center">
							<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#dle" v-on:click="nowIndex=index">删除</button>
						</td>
					</tr>
					<tr class="text-center" v-show="mydata.length!=0">
						<!--<td colspan="8">
							<button class="btn btn-danger" data-toggle="modal" data-target="#dle"  v-on:click="nowIndex=='all'">删除全部</button>
						</td>-->
					</tr>
					<tr v-show="mydata.length==0">
						<td colspan="8" class="text-center text-muted">
							暂无数据...
						</td>
					</tr>
				</table>
			   </div>
			   
			   		
				<div class="modal fade" role="dialog" id="dle">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button class="close" data-dismiss="modal">
									<span class="">&times;</span>
								</button>
								<h4 class="modal-title">确认删除吗？</h4>
							</div>
							<div class="modal-body text-right">
								<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div>
			
		</div>
	</body>
	<script>
	$(function(){
		var brandid = sessionStorage.getItem(key=3);
		var brandname = sessionStorage.getItem(key=100);
		console.log(brandname);
		$('#op').val(brandid);
		$('#op').text(brandname);
		var vm = new Vue({
			el:"#box",
			data:{
				mydata:[],
				brand_id:"",
				grade:"",
				name:"",
				money:"",
				discount:"1",
				rate:"",
				remark:"",
				Brand:"",
				Rate:"",
				up:"",
				earnings_state:"",
				upgrade_state:"",
				nowIndex:-100
			},			
			methods:{
				add:function(){
					var a = $('#brand_id').val();
					var c = $('#name').val();
					var d = $('#money').val();
					var e = $('#discount').val();
					var f = 0
					var g = $('#sta').val();
					var h = $('#st').val();
					console.log(a,c,d,e,f,g);
					this.$http.post(window.baseUrl+"user/thirdlevel/prod/add",{brand_id:a,name:c,money:d,discount:e,rate:f,
					status:g,true_false_buy:h},{emulateJSON:true}).then(
								   function (res){
								    console.log("开始调用远程数据...")
								    console.log(res)
								    alert('新增三级分销产品成功!')
								   },function (res) { 
								   	console.log("失败")
								   	alert('新增三级分销产品失败！')
								   } 
								  );
					this.mydata.push({
						brand_id:this.brand_id,
						grade:this.grade,
						name:this.name,
						money:this.money,
						discount:this.discount,
						rate:this.rate
					});
					this.brand_id="";
					this.grade="";
					this.name="";
					this.money="";
					this.discount="";
					this.rate="";					
				},				
				rest:function(){/*重置输入框*/
					this.brand_id="";
					this.grade="";
					this.name="";
					this.money="";
					this.discount="";
					this.rate=""		
				},
				deleteMsg:function(n){					
							this.mydata.splice(n,1)                
				},
				rest2:function(){
					this.Brand = ""
				    this.Rate =""
				    this.up = ""
				}
			}
		})		
	})
</script>
</html>

